<template>
    <div>
        <h1>表格的使用</h1>
        <!--
            :data      表格需要渲染的数据集合
           prop="date"    单元格中需要显示对象的属性名
           label   表头
           width  设置单元格的宽度
        -->
        <el-table
                :data="tableData"
                @selection-change="handleSelectionChange"
                style="width: 100%">

            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>

            <el-table-column
                prop="id"
                label="ID">

            </el-table-column>

            <el-table-column
                    prop="date"
                    label="日期">

            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
            >
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址">
            </el-table-column>

            <!--
                scope   当前行数对象
            -->
            <el-table-column
                    label="操作">
                <template slot-scope="scope">
                    <el-popconfirm title="这是一段内容确定删除吗？"
                                   confirm-button-text='确认'
                                   cancel-button-text='取消'
                                   @confirm = 'handleEdit(scope.$index, scope.row)'
                    >
                        <el-button size="mini" slot="reference">编辑</el-button>
                    </el-popconfirm>

                    <el-popconfirm title="这是一段内容确定删除吗？"
                                   confirm-button-text='确认'
                                   cancel-button-text='取消'
                                   @confirm = 'handleDelete(scope.$index, scope.row)'
                    >
                        <el-button size="mini" type="danger" slot="reference">删除</el-button>
                    </el-popconfirm>

                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="1"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>

</template>

<script>
export default {
    name: "ElementTable",
    data() {
        return {
            tableData: [
                {
                    id: 1,
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    id: 2,
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    id: 3,
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    id: 4,
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }],
            multipleSelection:[],
            total:200,
        }
    },
    created() {
        // 发送异步请求    获取当前页数据   tableData  total
    },
    methods: {
        // 编辑
        handleEdit(index, row) {
            console.log(JSON.stringify(row));
        },
        // 删除
        handleDelete(index, row) {
            console.log(row.name);
        },
        // 复选框回调
        handleSelectionChange(val) {
            let ids = val.map(row=>row.id);
            this.multipleSelection = ids;
            console.log(JSON.stringify(this.multipleSelection))
        },
        // 每页显示的条数
        handleSizeChange(val) {
            // 发送异步请求
            console.log(`每页 ${val} 条`);
        },
        // 改变页码
        handleCurrentChange(val) {
            // 发送异步请求
            console.log(`当前页: ${val}`);
        }
    }
}
</script>

<style scoped>
.pagination{
    margin-top: 10px;
}
</style>